<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
	<title>BIM漫游</title>
	<style>
		html,
		body,
		#viewDiv {
			padding: 0;
			margin: 0;
			height: 100%;
			width: 100%;
		}
	</style>
	<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"/>
	<script src="https://js.arcgis.com/4.18/"></script>
	<script>
		require(["esri/Map",
			"esri/Camera",
			"esri/views/SceneView",
			"esri/layers/BuildingSceneLayer",
			"esri/layers/MapImageLayer",
			"esri/layers/support/BuildingFilter"
		], (Map,
			Camera,
			SceneView,
			BuildingSceneLayer,
			MapImageLayer,
			BuildingFilter
		) => {
			// 加载底图
			const basemapLayer = new MapImageLayer({
				url: 'https://cloud04.qnlm.cn/server/rest/services/qingdao/MapServer',
			});

			// BIM模型
			const bimLayer = new BuildingSceneLayer({
				url: "https://cloud04.qnlm.cn/server/rest/services/Hosted/shibeiyey/SceneServer",
				// url: "https://cloud04.qnlm.cn/server/rest/services/Hosted/a313/SceneServer",
				id: "sgtBim",
				outFields: ["*"]
			});

			const haitianBimLayer = new BuildingSceneLayer({
				url: "https://cloud04.qnlm.cn/server/rest/services/Hosted/%E9%9D%92%E5%B2%9B%E6%B5%B7%E5%A4%A9%E4%B8%AD%E5%BF%83%E9%A1%B9%E7%9B%AE/SceneServer",
				id: "haitianBim",
				outFields: ["*"]
			});

			const map = new Map({
				layers: [
					basemapLayer,
					bimLayer
				],
			});

			map.ground.surfaceColor = '#004C73';

			var view = new SceneView({
				container: "viewDiv",
				groundView: true,
				map: map,
				spatialReference: 4490
			});


			view.when(() => {
				view.goTo(bimLayer.fullExtent).then(() => {
					// setFullModel(bimLayer, false);
				});

				view.on("double-click", function (event) {
					event.stopPropagation();
					view.hitTest(event).then(function (response) {
						debugger;
						view.goTo(response.results[0].graphic);
					});
				});
			});

			const setFullModel = (layer, showOverView) => {
				if (layer) {
					layer.when(() => {
						setSublayerVisiable(layer, showOverView);
					})
				}
			};

			const setSublayerVisiable = (layer, showOverView) => {
				showOverView = showOverView || false;
				if (!layer) {
					return;
				}
				if (layer.sublayers) {
					layer.sublayers.forEach(function (sublayer) {
						console.log(sublayer.modelName);
						if (sublayer.modelName == "Overview") {
							sublayer.visible = showOverView;
						}
						else {
							sublayer.visible = !showOverView;
						}
						if (sublayer.sublayers) {
							setSublayerVisiable(sublayer, showOverView);
						}
					})
				}
			};


		});
	</script>
</head>

<body>
	<div id="viewDiv"></div>
</body>

</html>
